import React, { useState, useCallback, useEffect, Component, useRef } from 'react'

export default function App() {
  let countRef = useRef(0)

  let print = () => {
    setTimeout(() => {
      console.log(countRef.current)
    }, 3000)
  }

  let add = useCallback(
    () => {
      countRef.current = countRef.current + 1
      print()
    },
    []
  )

  let minus = useCallback(
    () => {
      countRef.current = countRef.current - 1
      print()
    },
    []
  )

  // useEffect(() => {
  //   setTimeout(() => {
  //     console.log(countRef.current)
  //   }, 3000)
  // }, [countRef])

  return (
    <div>
      <button onClick={minus}>-</button>
      {countRef.current}
      <button onClick={add}>+</button>
    </div>
  )
}

// export default function App() {
//   let [count, setCount] = useState(0)

//   let add = useCallback(
//     () => {
//       setCount(count+1)
//     },
//     [count]
//   )

//   let minus = useCallback(
//     () => {
//       setCount(count-1)
//     },
//     [count]
//   )

//   useEffect(() => {
//     setTimeout(() => {
//       console.log(count)
//     }, 3000)
//   }, [count])

//   return (
//     <div>
//       <button onClick={minus}>-</button>
//       {count}
//       <button onClick={add}>+</button>
//     </div>
//   )
// }

// export default class App extends Component {
//   state = {
//     count: 0
//   }

//   add = () => {
//     this.setState({
//       count: this.state.count + 1
//     })
//   }

//   minus = () => {
//     this.setState({
//       count: this.state.count - 1
//     })
//   }

//   componentDidUpdate() {
//     setTimeout(() => {
//       console.log(this.state.count)
//     }, 3000)
//   }

//   render() {
//     return (
//       <div>
//         <button onClick={this.minus}>-</button>
//         {this.state.count}
//         <button onClick={this.add}>+</button>
//       </div>
//     )
//   }
// }
